<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>昨日漏斗转化数据</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 800px;height:600px;"></div>
    <script>
        var rawData = [
            { value: 100, name: "发送" },
            { value: 90, name: "送达" },
            { value: 60, name: "点击" }
        ];

        var option = {
            title: {
                text: "昨日漏斗转化数据",
                left: "center"
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c}%"
            },
            legend: {
                bottom: 5
            },
            series: [
                {
                    name: "昨日数据",
                    type: "funnel",
                    left: "10%",
                    top: 60,
                    bottom: 60,
                    sort: "descending",
                    gap: 3,
                    label: {
                        show: true,
                        position: "inside",
                        color: "#fff"
                    },
                    labelLine: {
                        length: 10,
                        lineStyle: {
                            width: 1,
                            type: "solid"
                        }
                    },
                    itemStyle: {
                        borderColor: "#fff",
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 12
                        }
                    },
                    data: rawData.map((item, index) => {
                        return {
                            value: item.value,
                            name: item.name,
                        };
                    })
                }
            ]
        };

        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>

</html>